<template>
  <el-card :body-style="{ padding: '3px' }" style="border: 1px solid cornflowerblue">
    <div slot="header" class="clearfix" >
      <div class="ach_title">
        <span class="span_title">归档文件</span>
        <el-button type="primary" size="large" icon="el-icon-refresh" @click="init">刷新</el-button>
      </div>
    </div>
    <div class="section" v-loading="loading" v-if="!loading">
      <div class="section_404" v-if="!isConnected">
        <el-image :src="require('@/assets/img/others/404.png')" style="padding: 5px;"></el-image>
      </div>
      <div v-else>
        <div style="width: 500px">
          <el-table :data="projectFiletList" border >
            <el-table-column prop="fileName" header-align="center" align="left" label="上传记录名称"></el-table-column>
            <el-table-column prop="createUsername" header-align="center" align="left" label="创建人" width="100"></el-table-column>
            <el-table-column  header-align="center" align="left" label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="openProFileHandle(scope.row)">打开</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="display: flex;width: 100%;padding: 10px;">
          <div style="width: 500px;">
            <strong>成果文件：</strong>
            <el-table :data="dataList" border @selection-change="selectionChangeHandle">
              <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
              <el-table-column prop="fileName" header-align="center" align="left" label="文件名"></el-table-column>
              <el-table-column prop="createUsername" header-align="center" align="left" label="创建人" width="100"></el-table-column>
            </el-table>
          </div>
          <div style="padding-top: 30px;">
            <el-button type="primary" @click="saveArchFileHandle">归档至》</el-button>
          </div>
          <div style="width: 500px;">
            <strong>归档文件：</strong>
            <el-table :data="archList" border >
              <el-table-column prop="fileName" header-align="center" align="left" label="文件名"></el-table-column>
              <el-table-column prop="createUsername" header-align="center" align="left" label="创建人" width="100"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import {getFileType} from '@/utils/others/fileutils'
import {isAuth, getUUID,stringIsNull} from '@/utils'

export default {
  props: {
    projectNo: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      isConnected: true,
      loading: true,
      showImg: false,
      ipServer: '',
      panelShow: false,
      statusText: {
        success: '成功了',
        error: '出错了',
        uploading: '上传中',
        paused: '暂停中',
        waiting: '等待中'
      },
      dataListSelections: [],
      archList: [],
      dataList: [],
      projectFiletList: [],
      selectItem: null, // 选择的记录文件
      contractItem: {}, // 对应的合同项
      timer: '', // 定时器
      options: {}
    }
  },
  created () {
    this.isConnected = true
    this.init()
  },
  methods: {
    init () {
      // 初始化上传组件
      this.loading = true
      this.selectItem = null
      this.getIpconfigFromApi().then(ip => {
        this.loading = false
        this.ipServer = ip
        this.getInfoByProjectNo(this.projectNo).then(info => {
          this.getArchList(info.contractName)
          this.getRfileList(info.contractName)
          this.loading = false
        })
      })
    },
    // 获取成果文件
    getArchList (curpath) {
      this.$http({
        url: 'http://' + this.ipServer + '/webapi/rfile/archlist',
        method: 'get',
        params: this.$http.adornParams({
          curpath: curpath
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.archList = data.list
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    getRfileList (fileName) {
      this.$http({
        url: 'http://' + this.ipServer + '/webapi/rfile/innerList',
        method: 'get',
        params: this.$http.adornParams({
          fileName: fileName
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.projectFiletList = data.innerList
          this.contractItem = data.entity
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 根据父类Id 获取列表
    getRListByPid (pid) {
      this.$http({
        url: 'http://' + this.ipServer + '/webapi/rfile/getRListByPid',
        method: 'get',
        params: this.$http.adornParams({
          parentId: pid
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.list
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 打开项目文件
    openProFileHandle (item) {
      this.selectItem = item
      this.getRListByPid(item.id)
    },
    // 获取参数Ip
    getIpconfigFromApi () {
      this.loading = true
      return new Promise((resolve, reject) => {
        this.$http({
          url: this.$http.adornUrl('/sys/config/getNameByKey'),
          method: 'get',
          params: this.$http.adornParams({
            key: 'innerIp'
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            resolve(data.config.paramValue)
          } else {
            this.$message.error(data.msg)
            reject(data)
          }
        })
      })
    },
    // 获取项目基本信息
    getInfoByProjectNo (projectNo) {
      return new Promise((resolve, reject) => {
        this.$http({
          url: this.$http.adornUrl(`/project/projectInfo/info/${projectNo}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            resolve(data.projectInfo)
          } else {
            this.$message.error(data.msg)
            reject(data.msg)
          }
        })
      })
    },
    // 归档文件
    saveArchFileHandle () {
      var ids = this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm('确定归档操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log(ids)
        this.$http({
          url: 'http://' + this.ipServer + '/webapi/rfile/saveArch',
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500
            })
            this.init()
            // this.getDataList()
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/scss/_variables.scss";
.ach_title{
  padding: 0;
  justify-content: space-between;
  display: flex
}
.span_title {
  font-size: 19px;
  font-weight: 700;
}
.section {
  //box-shadow: inset 6px 1px 13px -2px $--color-primary;
  min-height: 200px;
  width: 100%;
  .section_404 {
    text-align: center;
  }
}
.file_section {
  padding: 6px;
  display: inline-block;
  width: 100%;
  .file_item {
    width: 165px;
    text-align: center;
    margin-left: 5px;
    padding: 3px;
    text-align: left;
    display: flex;
    position: relative;
    -webkit-user-select:none ;
    -moz-user-select:none;
    .file_item_span{
      width: 125px;
      .file_item_span_nom {
        font-weight: bolder;
        overflow: hidden;
        white-space:nowrap;
        word-wrap:break-word;
        text-overflow:ellipsis;//文字隐藏后添加省略号
      }
    }
    i {
      font-size: 45pt;
      margin-top: 2px;
    }
    &:hover {
      cursor: pointer;
      background: $--color-primary;
      .btn_card {
        display: block;
        background-color: #0c0c0c9f;
        position: absolute;
        height: 100%;
        width: 100%;
      }
      span {
        white-space:normal;
        overflow:auto;
        color: white;
      }
    }
  }
  .btn_card {
    background-color: #0c0c0c9f;
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
    z-index: 3;
    .btn_line {
      padding: 10px;
      vertical-align: middle;
      position: absolute;
      top:15%;
      width: 100%;
    }
  }
}

.popup-container {
  position: relative;
  box-shadow: -2px -4px 5px $navbar--background-color;
  border: 1px $navbar--background-color solid;
  //right: 20px;
  //bottom: 30px;
  padding: 1px;
  z-index: 2001;
  width: 100%;
  -moz-user-select:none;		/* 火狐 */
  -webkit-user-select:none;	/* 谷歌 */
  -ms-user-select:none;		/* IE */
  user-select:none;
  .header {
    padding: 6px;
    background: $--color-primary;
    color: whitesmoke;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .title_span {
      font-size: 15pt;
      font-weight: 700;
    }
    .title_btn{
      padding-right: 5px;
      i {
        font-size: 19pt;
        font-weight: 700;
        cursor: pointer;
      }
      i:hover{
        color: red;
      }
    }
  }
  .content {
    background: beige;
    height: 200px;
    overflow-y: auto;
  }
}
</style>
